<!-- 新增/编辑 组织机构 -->
<template>
  <a-descriptions :column="1" :align="{ label: 'right' }">
    <a-descriptions-item label="工单号">
      <template v-if="form.handleFlag">
        <a-link @click="() => handleClickGo('work', form)">{{ form.workOrderNo }}</a-link>
      </template>
      <template v-else>
        {{ form.workOrderNo || '-' }}
      </template>
      <a-tag class="ml-2" v-if="form.workOrderStatusName" :color="getWorkOrderColor(form.workOrderStatus)">
        {{ form.workOrderStatusName }}
      </a-tag>
    </a-descriptions-item>
    <a-descriptions-item label="关联订单号">
      <template v-if="form.orderNo">
        <a-link @click="() => handleClickGo('order', form)"> {{ form.orderNo }} | {{ form.orderTypeName }} </a-link>
      </template>
      <template v-else>-</template>
    </a-descriptions-item>
    <template v-if="form.workOrderType !== 3">
      <!-- 预计取还车 -->
      <a-descriptions-item :label="getLabel(record, day, 'expect')">
        {{ getValue(record, day, 'expect') || '-' }}
      </a-descriptions-item>
      <!-- 实际取还车 -->
      <a-descriptions-item v-if="form.realUseCarTime || form.realReturnCarTime" :label="getLabel(record, day, 'real')">
        {{ getValue(record, day, 'real') || '-' }}
      </a-descriptions-item>
      <!-- 交还车信息 -->
      <a-descriptions-item :label="getTypeLabel(record, day)">
        {{ getTypeValue(record, day) || '-' }}
      </a-descriptions-item>
    </template>
    <template v-else>
      <a-descriptions-item label="换车时间"> {{ form.changCarTime }} </a-descriptions-item>
      <a-descriptions-item label="换下车信息"> {{ form.replaceCarLicenseNo }} {{ form.replaceVin }} </a-descriptions-item>
      <a-descriptions-item label="换上车信息"> {{ form.changeCarLicenseNo }} {{ form.changeVin }} </a-descriptions-item>
    </template>
  </a-descriptions>
  <a-space class="flex justify-end" v-if="form.agoWorkOrderId || form.afterWorkOrderId || form.handleFlag">
    <a-button v-if="form.agoWorkOrderId" @click="handleChange(form.agoWorkOrderId, 'pre')" :loading="loading">上一条</a-button>
    <a-button v-if="form.afterWorkOrderId" @click="handleChange(form.afterWorkOrderId, 'next')" :loading="loading"> 下一条 </a-button>
    <a-button @click="() => handleClickGo('work', form)" type="primary" v-if="form.handleFlag">去处理</a-button>
  </a-space>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue'
  import { getChangeCarOrder } from '@/api/driver'
  import useNavigate from '@/hooks/useNavigate'

  const visible = ref(false)
  const loading = ref(false)
  const title = ref('')
  const form = ref<any>({})
  const { navigateTo } = useNavigate()

  const props = defineProps({
    record: {
      type: Object,
      default: () => {},
    },
    day: {
      type: String,
      default: '',
    },

    titleIndex: {
      type: Number,
      default: 1,
    },
  })

  const getLabel = (record: any, day: string, type: string) => {
    switch (record[day].label) {
      case '交车单':
        return type === 'expect' ? '预计取车时间' : '实际取车时间'
      case '还车单':
        return type === 'expect' ? '预计还车时间' : '实际还车时间'
    }
  }

  const getValue = (record: any, day: string, type: string) => {
    switch (record[day].label) {
      case '交车单':
        return type === 'expect' ? form.value.expectUseCarTime : form.value.realUseCarTime
      case '还车单':
        return type === 'expect' ? form.value.expectReturnCarTime : form.value.realReturnCarTime
    }
  }

  const getTypeLabel = (record: any, day: string) => {
    switch (record[day].label) {
      case '交车单':
        return '交车信息'
      case '还车单':
        return '还车信息'
    }
  }

  const getTypeValue = (record: any, day: string) => {
    switch (record[day].label) {
      case '交车单':
        return form.value.address
      case '还车单':
        return form.value.returnAddress
    }
  }

  const getWorkOrderColor = (type: number) => {
    switch (type) {
      case 3:
        return 'orange'
      case 4:
        return 'green'
      case 5:
        return 'gray'
    }
  }

  const handleClickGo = (type: string, params: any) => {
    console.log('params', params)

    switch (type) {
      case 'work':
        navigateTo(`/business/work-order/order?workOrderCode=${form.value.workOrderNo}`, '订单工单')
        break
      case 'order':
        if (params.orderType === 1) {
          navigateTo(`/short-order/detail/${params.orderId}`, `${params.orderNo}-短租详情`)
        } else {
          navigateTo(`/long-order/detail/${params.orderId}`, `${params.orderNo}-长租详情`)
        }
        break
    }

    visible.value = false
  }

  const emits = defineEmits(['indexChange'])
  const titleTmp = ref(props.titleIndex)
  const handleChange = (val: any, type?: string) => {
    if (type === 'pre') {
      titleTmp.value--
      emits('indexChange', titleTmp.value)
    } else if (type === 'next') {
      titleTmp.value++
      emits('indexChange', titleTmp.value)
    }

    loading.value = true
    getChangeCarOrder({
      workOrderId: val,
    })
      .then((res) => {
        form.value = res.result
      })
      .finally(() => {
        loading.value = false
      })
  }

  watch(
    () => props.record,
    (val) => {
      if (val) {
        title.value = val[props.day].label
        let workOrderId = ''
        switch (val[props.day].label) {
          case '交车单':
            workOrderId = val[props.day].giveCarOrderId
            break
          case '还车单':
            workOrderId = val[props.day].returnCarOrderId
            break
          case '换车单':
            workOrderId = val[props.day].changeCarOrderId
            break
        }
        handleChange(workOrderId)
      }
    },
    { immediate: true }
  )
</script>

<style lang="less" scoped>
  :deep(.arco-descriptions-item-label) {
    width: 1px !important;
  }
  :deep(.arco-descriptions-item-value) {
    width: auto !important;
  }
</style>
